<template>
    <view @touchmove.stop.prevent="returnEvent">
        <view class="mask" v-if="show">
            <view class="mask-main">
                <view class="mask-content">
                    <view class="closeArea" :style="{ width: width + 'px' }">
                        <image
                            @click="closeEvent"
                            src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/close_ss.png"
                            style="width: 48rpx; height: 48rpx"
                        ></image>
                    </view>
                    <canvas canvas-id="canvasMy" :style="{ width: width + 'px', height: height + 'px' }"></canvas>
                </view>

                <view class="bottom_option_view">
                    <view class="menu_view">
                        <!-- @click="shareMenu" -->
                        <button
                            class="share-button"
                            open-type="share"
                            @click="shareMenu"
                            style="display: flex; flex-direction: column; align-items: center"
                        >
                            <image style="height: 84rpx; width: 84rpx" src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/wechat.png"></image>
                            <label style="margin-top: 16rpx; color: #333333; font-size: 24rpx">微信好友</label>
                        </button>
                        <view style="display: flex; flex-direction: column; align-items: center" @click="saveImage">
                            <image style="height: 84rpx; width: 84rpx" src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/saveicon.png"></image>
                            <label style="margin-top: 16rpx; color: #333333; font-size: 24rpx">保存图片</label>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'share-img-pop-view',
    data() {
        return {
            width: '',
            height: 343,
            anvasImages: '',
        };
    },
    props: {
        mainData: {
            type: Object,
            default: () => {},
        },
        show: {
            type: Boolean,
            default: false,
        },
        measurementRecordSharePicture: {
            type: String,
            default: '',
        },
        recordDate: {
            type: String,
            default: '',
        },
        //   anvasImages:{
        //     type: String,
        //     default: '',
        // },
    },
    created() {
        // this.init();
    },
    computed: {
        screenWidth() {
            const width = this.$store.getters.getScreenWidth || 0;
            return width * 0.79;
        },
    },
    mounted() {
        let that = this;
        uni.getSystemInfo({
            success: function (res) {
                that.width = Number((res.screenWidth * 0.79).toFixed(0));
                that.init();
            },
        });
    },
    watch: {
        mainData: {
            handler(newValue, oldValue) {
                this.mainData = this.mainData;
                this.init();
            },
        },
        show: {
            handler(newValue, oldValue) {
                // this.show = this.show
                if (this.show) {
                    this.init();
                }
            },
        },
        deep: true, // 需要监测数据变化的时候需要深度监听
    },
    methods: {
        async posterWidth() {
            if (this.width) {
                return this.width;
            }
            let width;
            await uni.getSystemInfo({
                success: function (res) {
                    width = Number((res.screenWidth * 0.79).toFixed(0));
                },
            });
            this.width = width;
            return width;
        },
        async init() {
            let that = this;
            let goodsImgUrl = '/static/img/logo_min.png';
            let goodserwei = '/static/img/erwei.png';
            let weightNUM1 = 0;
            let weightNUM3 = 0;
            let weightName = '';
            let day = that.gapDay();
            // that.gapDay()
            // (that.mainData.latestWeight - that.mainData.weight).toFixed(1)
            let weightNUM4 = 0;
            let weight = Math.abs(((that.mainData.latestWeight - that.mainData.weight) * 2).toFixed(1));
            if (that.mainData.nickname) {
                if (that.mainData.nickname.length > 12) {
                    weightName = that.mainData.nickname.slice(0, 12) + '...';
                } else {
                    weightName = that.mainData.nickname;
                }
            } else if (that.mainData.name) {
                if (that.mainData.name.length > 12) {
                    weightName = that.mainData.name.slice(0, 12) + '...';
                } else {
                    weightName = that.mainData.name;
                }
            }
            let goodsImg = await that.getImageInfo(that.mainData.avatar).catch(()=>'');
            let goodsImg1 = await that.getImageInfo1(that.measurementRecordSharePicture).catch(()=>'');
			
            if (day >= 0) {
                if (day.toString().length == 1 && weight.toString().length == 1) {
                    weightNUM1 = 105;
                    weightNUM3 = 195;
                    weightNUM4 = 210;
                } else if (day.toString().length == 1 && weight.toString().length == 2) {
                    weightNUM1 = 105;
                    weightNUM3 = 195;
                    weightNUM4 = 220;
                } else if (day.toString().length == 1 && weight.toString().length == 3) {
                    weightNUM1 = 105;
                    weightNUM3 = 195;
                    weightNUM4 = 230;
                } else if (day.toString().length == 1 && weight.toString().length == 4) {
                    weightNUM1 = 105;
                    weightNUM3 = 195;
                    weightNUM4 = 240;
                } else if (day.toString().length == 1 && weight.toString().length == 5) {
                    weightNUM1 = 105;
                    weightNUM3 = 195;
                    weightNUM4 = 250;
                }
                if (day.toString().length == 2 && weight.toString().length == 3) {
                    weightNUM1 = 115;
                    weightNUM3 = 205;
                    weightNUM4 = 235;
                } else if (day.toString().length == 2 && weight.toString().length == 2) {
                    weightNUM1 = 115;
                    weightNUM3 = 205;
                    weightNUM4 = 230;
                } else if (day.toString().length == 2 && weight.toString().length == 4) {
                    weightNUM1 = 115;
                    weightNUM3 = 205;
                    weightNUM4 = 245;
                } else if (day.toString().length == 2 && weight.toString().length == 5) {
                    weightNUM1 = 115;
                    weightNUM3 = 205;
                    weightNUM4 = 255;
                } else if (day.toString().length == 2 && weight.toString().length == 1) {
                    weightNUM1 = 115;
                    weightNUM3 = 205;
                    weightNUM4 = 220;
                }
                if (day.toString().length == 3 && weight.toString().length == 1) {
                    weightNUM1 = 125;
                    weightNUM3 = 215;
                    weightNUM4 = 230;
                } else if (day.toString().length == 3 && weight.toString().length == 3) {
                    weightNUM1 = 125;
                    weightNUM3 = 215;
                    weightNUM4 = 250;
                } else if (day.toString().length == 3 && weight.toString().length == 2) {
                    weightNUM1 = 125;
                    weightNUM3 = 215;
                    weightNUM4 = 240;
                } else if (day.toString().length == 3 && weight.toString().length == 4) {
                    weightNUM1 = 125;
                    weightNUM3 = 215;
                    weightNUM4 = 260;
                } else if (day.toString().length == 3 && weight.toString().length == 5) {
                    weightNUM1 = 125;
                    weightNUM3 = 215;
                    weightNUM4 = 270;
                }
                if (day.toString().length == 4 && weight.toString().length == 1) {
                    weightNUM1 = 135;
                    weightNUM3 = 225;
                    weightNUM4 = 245;
                } else if (day.toString().length == 4 && weight.toString().length == 2) {
                    weightNUM1 = 135;
                    weightNUM3 = 225;
                    weightNUM4 = 255;
                } else if (day.toString().length == 4 && weight.toString().length == 3) {
                    weightNUM1 = 135;
                    weightNUM3 = 225;
                    weightNUM4 = 260;
                } else if (day.toString().length == 4 && weight.toString().length == 4) {
                    weightNUM1 = 135;
                    weightNUM3 = 225;
                    weightNUM4 = 270;
                } else if (day.toString().length == 4 && weight.toString().length == 5) {
                    weightNUM1 = 135;
                    weightNUM3 = 225;
                    weightNUM4 = 275;
                }
            }

            // setTimeout(()=>{
            var ctx = uni.createCanvasContext('canvasMy', this);
            if (ctx.canvasId == 'canvasMy') {
                // / 1.填充背景色，白色
                const screenWidth = await that.posterWidth();
                try {
                    that.fillRoundRect(ctx, 0, 0, screenWidth, that.height, 10, '#E0EDE9');
                    ctx.drawImage(goodsImgUrl, screenWidth - 69, 17, 54, 20);
                    // ctx.drawImage(goodsImg1,15, 94, 165, 160)
                    // 人物头像
                  goodsImg.path&&  that.drawCircular(ctx, goodsImg.path, 15, 15, 24, 24);
                    that.drawText(14, '#333333', 'left', weightName, 44, 31, ctx, 1);
                    that.drawText(14, '#333', 'left', '体重管理第', 15, 69, ctx, 1, 400);

                    // that.gapDay()

                    that.drawText(18, '#31B08A', 'left', day, 90, 69, ctx, 1, 400);
                    that.drawText(14, '#333', 'left', '天，成功减重', weightNUM1, 69, ctx, 1, 400);
                    that.drawText(18, '#31B08A', 'left', weight, weightNUM3, 69, ctx, 1, 400);
                    that.drawText(14, '#333', 'left', '斤', weightNUM4, 69, ctx, 1, 400);
                goodsImg1.path&&   ctx.drawImage(goodsImg1.path, 15, 94, screenWidth - 30, 160);
                    that.drawText(12, '#999', 'left', '长按识别二维码', 15, that.height - 50, ctx, 1, 400);
                    that.drawText(12, '#999', 'left', '和我一起开始健康生活吧～', 15, that.height - 28, ctx, 1, 400);
                    ctx.drawImage(goodserwei, screenWidth - 59, that.height - 59, 44, 44);
                } catch (e) {
                    console.log('渲染图片失败回调', e);
                }

                // ctx.draw()

                setTimeout(function () {
                    that.$nextTick(function () {
                        ctx.draw(true, (ret) => {
                            setTimeout(function () {
                                uni.canvasToTempFilePath(
                                    {
                                        // 保存canvas为图片
                                        canvasId: 'canvasMy',
                                        quality: 1,
                                        width: screenWidth,
                                        height: that.height,

                                        complete: (res) => {
                                            // 在H5平台下，tempFilePath 为 base64,
                                            // 图片提示跨域 H5保存base64失败，APP端正常输出临时路径
                                            that.anvasImages = res.tempFilePath;
                                        },
                                    },
                                    that,
                                );
                            }, 100);
                        });
                    });
                }, 50);
            }
        },
        saveImage() {
            this.$emit('saveImage', this.anvasImages);
        },
        shareMenu() {
            this.$emit('shareMenu', this.anvasImages);
        },
        async drawRoundImageToCanvas(
            context,
            image,
            x,
            y,
            width,
            height,
            radian_1 = 0,
            radian_2 = -1,
            radian_3 = -1,
            radian_4 = -1,
        ) {
            context.save();
            this.drawRoundPath(context, x, y, width, height, radian_1, radian_2, radian_3, radian_4);
            context.drawImage(await this.handleNetworkImgaeTransferTempImage(image), x, y, width, height);
            context.restore();
        },
        drawCircular(ctx, url, x, y, width, height) {
            //画圆形头像
            var avatarurl_width = width;
            var avatarurl_heigth = height;
            var avatarurl_x = x;
            var avatarurl_y = y;
            ctx.save();
            ctx.beginPath();
            ctx.arc(
                avatarurl_width / 2 + avatarurl_x,
                avatarurl_heigth / 2 + avatarurl_y,
                avatarurl_width / 2,
                0,
                Math.PI * 2,
                false,
            );
            ctx.clip();
            ctx.drawImage(url, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth);
            ctx.restore();
        },

        async getImageInfo(imgSrc) {
            return new Promise((resolve, errs) => {
                uni.getImageInfo({
                    src: imgSrc,
                    success: function (image) {
                        resolve(image);
                    },
                    fail(err) {
                        errs(err);
                    },
                });
            });
        },
        async getImageInfo1(imgSrc) {
            return new Promise((resolve, errs) => {
                uni.getImageInfo({
                    src: imgSrc,
                    success: function (image) {
                        resolve(image);
                    },
                    fail(err) {
                        errs(err);
                    },
                });
            });
        },
        drawText(size, color, align, content, drawX, drawY, ctx, pixelRatio, weight) {
            ctx.setFontSize(size / pixelRatio);
            ctx.setFillStyle(color);
            ctx.setTextAlign(align);
            ctx.fillText(content, drawX / pixelRatio, drawY / pixelRatio, weight);
        },

        drawRoundPath(context, x, y, width, height, radian_1 = 0, radian_2 = -1, radian_3 = -1, radian_4 = -1) {
            // 设置弧度
            radian_2 = radian_2 === -1 ? radian_1 : radian_2;
            radian_3 = radian_3 === -1 ? radian_1 : radian_3;
            radian_4 = radian_4 === -1 ? radian_1 : radian_4;

            // 创建路径 - 绘制带圆边的矩形
            context.beginPath();
            context.moveTo(x + width / 2, y);
            context.arcTo(x + width, y, x + width, y + height, radian_1);
            context.arcTo(x + width, y + height, x, y + height, radian_2);
            context.arcTo(x, y + height, x, y, radian_3);
            context.arcTo(x, y, x + width, y, radian_4);
            // 关闭路径 - 结束绘制
            context.closePath();
            context.strokeStyle = 'transparent';
            context.stroke();
            context.clip();
        },
        handleNetworkImgaeTransferTempImage(url) {
            return new Promise((resolve) => {
                if (url.indexOf('https') === 0) {
                    uni.downloadFile({
                        url,
                        success: (res) => {
                            resolve(res.tempFilePath);
                        },
                    });
                } else {
                    resolve(url);
                }
            });
        },
        fillRoundRect(cxt, x, y, width, height, radius, /*optional*/ fillColor) {
            let _this = this;
            //圆的直径必然要小于矩形的宽高
            if (2 * radius > width || 2 * radius > height) {
                return false;
            }

            cxt.save();
            cxt.translate(x, y);
            //绘制圆角矩形的各个边
            _this.drawRoundRectPath(cxt, width, height, radius);
            cxt.fillStyle = fillColor || '#000'; //若是给定了值就用给定的值否则给予默认值
            cxt.fill();
            cxt.restore();
        },
        drawRoundRectPath(cxt, width, height, radius) {
            cxt.beginPath(0);
            //从右下角顺时针绘制，弧度从0到1/2PI
            cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2);

            //矩形下边线
            cxt.lineTo(radius, height);

            //左下角圆弧，弧度从1/2PI到PI
            cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);

            //矩形左边线
            cxt.lineTo(0, radius);

            //左上角圆弧，弧度从PI到3/2PI
            cxt.arc(radius, radius, radius, Math.PI, (Math.PI * 3) / 2);

            //上边线
            cxt.lineTo(width - radius, 0);

            //右上角圆弧
            cxt.arc(width - radius, radius, radius, (Math.PI * 3) / 2, Math.PI * 2);

            //右边线
            cxt.lineTo(width, height - radius);
            cxt.closePath();
        },

        closeEvent() {
            this.$emit('close');
        },
        returnEvent() {},
        gapDay() {
            if (this.mainData.registerTime) {
                var end = Date.parse(
                    new Date(
                        new Date(this.mainData.registerTime.toString().replace('T', ' ').replace(/\-/g, '/')).setHours(
                            1,
                            0,
                            0,
                        ),
                    ),
                );
                var now = Date.parse(new Date(new Date().setHours(1, 0, 0)));
                var msec = now - end;
                if (msec < 0) return;
                let days = Math.ceil(msec / (24 * 3600 * 1000)) + 1;
                return days;
            } else {
                return '1';
            }
        },
    },
};
</script>

<style scoped>
.mask {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1000;
}

.mask-main {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    position: relative;
}

.mask-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding-bottom: 252rpx;
    padding-top: 150rpx;
}

.closeArea {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 30rpx;
}

.bottom_option_view {
    position: absolute;
    bottom: 0;
    background-color: #ffffff;
    border-radius: 40rpx 40rpx 0rpx 0rpx;
    box-shadow: 0rpx -2rpx 0rpx 0rpx rgba(38, 43, 49, 0.06);
    height: 252rpx;
    width: 100%;
}

.menu_view {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: 30rpx;
    margin-left: 160rpx;
    width: calc(100% - 320rpx);
}

.share_img_view {
    margin-top: 30rpx;
    background-color: #e0ede9;
    margin-left: 80rpx;
    width: calc(100% - 160rpx);
    height: 686rpx;
    display: flex;
    flex-direction: column;
    border-radius: 24rpx;
}

.user_info_view {
    margin-top: 40rpx;
    margin-left: 30rpx;
    width: calc(100% - 60rpx);
    display: flex;
    flex-direction: row;
    align-items: center;
}

.share-button {
    margin: 0;
    background: #fff;
}
</style>
